<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css" />
		<style>
			*{
			 margin: 0;
			 padding: 0;
			}
			.a{
				position: relative;
			    width: 200px;
				 height:50px;
				 background-image: url(产品-Bellucci%20EVOO_files/logo_k.png);
				 top: 15px;
				 left: 40px;
				}
			a:hover{
					 background-color: #AFD9EE;
				     color: #31708F;
			       }
			li{
				list-style-type:none;
				float: left;
				margin-left: 30px;
			}	
			
			a{
				text-decoration: none;	
				font-size: small;
				font-family: "微软雅黑";
				color: #444444;	
				
			 }
			 ul{
			 		position: relative;
			 		top: -15px;
			 		left: 79%;
			 		width: 250px;
			 		/* overflow: auto; */
					
			 } 
			 p{
			 		width: 1px;height: 1px;
			 		background-color: #000000;
			 		display: none;
	         	}
				
			.h{
				background-color: #fafafa;
				width: 1349px;
				height: 1000px;
				margin-top: 45px;
			  }	
				  
			#toggle {
				width: 50px;
				height: 50px;
				border-radius: 500px 500px;
				display: inline-block;
				margin-left: 30px;
				margin-top: 10px;
				background-color: lightslategrey;
				opacity: 0;
			}
			
			#toggle~span {
				width: 25px;
				height: 4px;
				background-color: darkgray;
				display: block;
				margin: 9px 12px;
				position: absolute;
			
			}	
				  
			.span {
				  	top: 12px;
				  	left: -15px;
				  }
				  
			.span2 {
				  	top: 22px;
				  	left: -15px;
				  }
				  
			.span3 {
				  	top: 32px;
				  	left: -15px;
				  }
				  
				  
			.h1{
				margin-top: 30px;
				text-align: center;
				font-family: "宋体";
				font-weight: 100;
				font-size: 23px;
			    }	
			.h1 h1{position: absolute;
			       left: 367px;
				   top: 120px;
				   }
		    .cc1{
				margin-left:420px ;
				margin-top: 210px;
			}
			.cc2{
				position: absolute;
				left: 100px;
				margin-top: 170px;
			    }
			.cc3{
				position: absolute;
				margin-top: 240px;
				left: 100px;
			}	
			.cc4{
				position: relative;
				width: 130px;
				height: 20px;
				top: 240px;
				left: 584px;
			}
			.k1{
			    position: relative;
				width: 200px;
				height: 50px;
				top: 35px;
				left: 100px;
			}
			.k2{
			    position: relative;
				width: 300px;
				height: 20px;
				left: 261px;
			}
			.k3{
			    position: relative;
				width: 300px;
				height: 20px;
				top: 45px;
				left: 100px;
			}
			.k4{
				position: relative;
			    width: 600px;
				top: 45px;
				left: 100px;
			}
			.o1{
				position: relative;
				width: 200px;
				height: 40px;
				top: 75px;
				left: 100px;
			}
			.o2{
				position: relative;
				left: 20px;
				bottom: 21px;
			}
			.o3{
				position: relative;
				width: 200px;
				height: 40px;
				top: 85px;
				left: 100px;
			}
			.o4{
				position: relative;
				left: 63px;
				bottom: 28px;
			}
			.ll2{
				position: relative;
				width: 200px;
				height: 300px;
				left: 930px;
				bottom: 378px;
			}
			#box7{width: 1280px;height: 450px;margin: 0 auto;position: absolute;left: -1900px;top: 500px;}
			.box7_ul1{width: 284px;height: 224px;float: left;}
			.box7_ul1 li{font-family: "宋体";font-size: 16px;line-height: 32px;display: block;}
			.box7_ul1 li p{width: 0;height: 2px;background-color: #000000;margin-top: -6px;}
			
			
			.box7_ul2{float: left;width: 284px;}
			.box7_ul2 li{ display: block; font-size: 16px;line-height: 32px;font-family: "宋体";}	
			.box7_ul2 li p{width: 0px;height: 2px;background-color: #000000;margin-top: -6px;}
			
			.box7_ul3{float: left;width: 284px;font-family: "宋体";font-size: 16px;}
			.box7_ul3 li p{width: 0;height: 2px;background-color: #000000;margin-top: -6px;}
			.box7_ul3 li{ display: block; font-size: 16px;line-height: 32px;font-family: "宋体";}	
				

		</style>
	</head>
	<body>
		<div class="a">
			<div class="b">
				<a href="#" id="toggle"></a>
				<span class="span sspan"></span>
				<span class="span2 sspan"></span>
				<span class="span3 sspan"></span>
			</div>
		</div>

		<div>
			<ul>
				<li style="width: 52px;"><a href="#">产品展示</a>
					<p></p>
				</li>
				<li style="width: 66px;"><a href="#">商店定位器</a>
					<p></p>
				</li>
				<li style="width: 27px;"><a href="#">联系</a>
					<p></p>
				</li>
			</ul>
		</div>
		<div class="h">
			<div class="h1">
				<h1>我们很乐意听取您的意见<h1>
			</div>
			<div>
				<div class="cc2">
					<h3>伸出手来<h3>
				</div>
				<div class="cc3">
					<h5>我想了解更多有关贝鲁奇的信息。我的名字是<h5>
				</div>
				<div>
					<div class="cc4">
						<h5>我的电子邮件是</h5>
					</div>
				</div>
				<div class="cc1">
					<textarea rows="1.2px" cols="18px" style="border-bottom: #000000 solid 1px;"></textarea>
				</div>
				<div class="k1">
					<textarea rows="1.2px" cols="18px" style="border-bottom: #000000 solid 1px;"></textarea>
				</div>
				<div class="k2">
					<h5>。我想请贝鲁奇的人来找我。</h5>
				</div>
				<div class="k3">
					<h5>让我简要解释一下：</h5>
				</div>
				<div class="k4">
					<textarea rows="8px" cols="100" style="border-bottom: #000000 solid 1px;"></textarea>
				</div>
				<div class="o1">
					<input type="checkbox" value="1" name="privacy" id="privacy" required="">
					<div class="o2">
						<h6>我已阅读并同意<a href="#">隐私政策</a></h6>
					</div>
					</input>
				</div>
				<div>
					<div class="o3">
						<input id="submit" type="submit" value="发送" class="cta-btn cta-btn-primary">
						<div class="o4">
							<h6>*所有字段均为必填。</h6>
						</div>
					</div>
				</div>
				<div class="ll2">
					<h2>联系信息</h2>
					<div>
						<h6><br><br>
							14 Willett<br>
							Avenue-切斯特港301C套房，纽约州10573<br>
							<a href="#">电话：914-339-1117</a>
						</h6>
					</div>
					
					 <div id="box7">
					 	<ul class="box7_ul1">
					 		<li style="width: 65px;">产品展示
					 			<p></p>
					 		</li>
					 		<li style="width: 113px;">意大利100%EVOO
					 			<p></p>
					 		</li>
					 		<li style="width: 65px;">有机EVOO
					 			<p></p>
					 		</li>
					 		<li style="width: 177px;">SACHET 100％意大利EVOO
					 			<p></p>
					 		</li>
					 		<li style="width: 113px;">SACHET有机EVOO
					 			<p></p>
					 		</li>
					 		<li style="width:153px;">SICILIA PGI有机EVOO
					 			<p></p>
					 		</li>
					 		<li style="width: 146px;">托斯卡纳PGI EVOO
					 			<p></p>
					 		</li>
					 	</ul>
					 	<ul class="box7_ul2">
					 		<li style="width: 112px;">意大利是我的家
					 			<p></p>
					 		</li>
					 		<li style="width: 112px;">贝鲁奇应用程序
					 			<p></p>
					 		</li>
					 		<li style="width: 50px;">倒更多
					 			<p></p>
					 		</li>
					 		<li style="width: 80px;">完全可追溯
					 			<p></p>
					 		</li>
					 		<li style="width: 65px;">到达食谱
					 			<p></p>
					 		</li>
					 	</ul>
					 	<ul class="box7_ul3">
					 		<li style="width: 32px;">联系<p></p>
					 		</li>
					 		<li style="width: 80px;">商店定位器<p></p>
					 		</li>
					 		<li style="width: 65px;">获奖情况<p></p>
					 		</li>
					 	</ul>
					 </div>
					<script src="new_file.js" type="text/javascript" charset="utf-8"></script>

					<script type="text/javascript">
						$("li").hover(function() {
							$(this).children("p").show()
							var aa = $(this).width()
							$(this).children("p").stop(true).animate({
								"width": aa
							}, 350)
							console.log($(this).children("p"))
						}, function() {
							var aa = $(this).width()
							$(this).children("p").stop(true).animate({
								"width": 0
							}, 350)
						})
						// $(".box7_ul1 li").hover(function() {
						// 					var aa = $(this).width()
						// 					$(this).children("p").stop(true).animate({
						// 						"width": aa
						// 					}, 350)
						// 					console.log($(this).children("p"))
						// 				}, function() {
						// 					var aa = $(this).width()
						// 					$(this).children("p").stop(true).animate({
						// 						"width": 0
						// 					}, 350)
						// 				})
						
						// 				$(".box7_ul2 li").hover(function() {
						// 					var aa = $(this).width()
						// 					$(this).children("p").stop(true).animate({
						// 						"width": aa
						// 					}, 350)
						// 					console.log($(this).children("p"))
						// 				}, function() {
						// 					var aa = $(this).width()
						// 					$(this).children("p").stop(true).animate({
						// 						"width": 0
						// 					}, 350)
						// 				})
						
						
						// 				$(".box7_ul3 li").hover(function() {
						// 					var aa = $(this).width()
						// 					$(this).children("p").stop(true).animate({
						// 						"width": aa,
						// 						"height": "2px"
						// 					}, 350)
						// 					console.log($(this).children("p"))
						// 				}, function() {
						// 					var aa = $(this).width()
						// 					$(this).children("p").stop(true).animate({
						// 						"width": 0
						// 					}, 350)
						// 				})
					</script>
	</body>
</html>
